<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/main.css" />
  <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui.min.js"></script>
  <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
  <title>聊天机器人</title>
</head>

<body>
  <div class="wrap">
    <!-- 头部 Header 区域 -->
    <div class="header">
      <h3>小雪同学</h3>
      <img src="img/person01.png" alt="icon" />
    </div>
    <!-- 中间 聊天内容区域 -->
    <div class="main">
      <ul class="talk_list" style="top: 0px;">
        <li class="left_word">
          <img src="img/person01.png" /> <span>你好</span>
        </li>
        <li class="right_word">
          <img src="img/person02.png" /> <span>你好哦</span>
        </li>
      </ul>
      <!-- 滚动体 -->
      <div class="drag_bar" style="display: none;">
        <!-- 滚动条 -->
        <div class="drager ui-draggable ui-draggable-handle" style="display: none; height: 412.628px;"></div>
      </div>
    </div>
    <!-- 底部 消息编辑区域 -->
    <div class="footer">
      <img src="img/person02.png" alt="icon" />
      <input type="text" placeholder="说的什么吧..." class="input_txt" />
      <input type="button" value="发 送" class="input_sub" />
    </div>

    <!-- 音频功能 -->
    <audio src="" controls autoplay style="display:none;"></audio>

  </div>

  <script type="text/javascript" src="js/scroll.js"></script>
  <script src="./js/axios.js"></script>
  <script>
    $(function () {
      // 初始化右侧滚动条
      // 这个方法定义在scroll.js中
      // resetui()

      let text = document.querySelector('.input_txt')//获取文本框
      // 1.配置默认路径 http://www.liulongbin.top:3006
      axios.defaults.baseURL = 'http://www.liulongbin.top:3006'

      document.querySelector('.input_sub').onclick = function () {
        //2.非空判断
        if (text.value.trim().length === 0) return text.value = ''// 清空发送文本框

        //3.结果渲染到页面
        let li = document.createElement('li')
        li.innerHTML = `
            <li class="right_word">
                <img src="img/person02.png" /> <span>${text.value}</span>
            </li>
            `
        document.querySelector('.talk_list').appendChild(li)


        // 4.发送axios请求 参数参考接口文档
        axios({
          url: '/api/robot',
          method: 'get',
          params: {
            //参数值为文本框发送内容
            spoken: text.value
          }
        }).then(({ data: res }) => {
          //成功回调
          // 4.判断响应码 是否为接口文档功的状态码 
          if (res.data.type === 5000) {
            // 控制台打印测试
            // console.log(res.data.info.text); 机器人回复内容
            // 将机器人回复内容渲染到页面
            let li = document.createElement('li')
            li.innerHTML = `
            <li class="left_word">
                <img src="img/person01.png" /> <span>${res.data.info.text}</span>
            </li>
            `
            document.querySelector('.talk_list').appendChild(li)

            resetui()
          }

          // 将机器人文本转换为语音
          axios({
            url: '/api/synthesize',
            method: 'get',
            params: {
              text: res.data.info.text
            }
          }).then(({ data: res }) => {
            //成功回调
            console.log(res)
            if (res.status === 200) {
              document.querySelector('audio').src = res.voiceUrl
            }
          });

        });

        resetui()
        // 清空发送文本框
        text.value = ''
      }


      //键盘回车提交数据
      document.querySelector('.input_txt').onkeyup = function (e) {
        // console.log(e.keyCode);
        if (e.keyCode == 13) {
          document.querySelector('.input_sub').onclick()
        }
      }
    })

  </script>
</body>

</html>